<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="能源品种">
          <el-select v-model="category">
            <el-option :value="1" label="其它能源"></el-option>
            <el-option :value="2" label="电力"></el-option>
            <el-option :value="3" label="煤炭"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-select v-model="type">
            <el-option :value="1" label="按月"></el-option>
            <el-option :value="2" label="按日"></el-option>
          </el-select>
          <el-date-picker :type="pickerType" v-model="date" :format="pickerFormatter" :value-format="pickerFormatter"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-content flex">
      <div class="content-item bg-white border-radius">
        <div class="item-head">各类能源消耗占比</div>
        <div class="item-content" v-loading="loading1">
          <v-chart ref="chart1" :option="chartOption1" style="width:100%;height:100%;"></v-chart>
        </div>
      </div>
      <div class="content-item bg-white border-radius margin-left">
        <div class="item-head">各单位能耗对比</div>
        <div class="item-content" v-loading="loading2">
          <v-chart ref="chart2" :option="chartOption2" style="width:100%;height:100%;"></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.flex-content {
  flex: 1;
}
.content-item {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.item-head {
  padding: 20px $gutter $gutter $gutter;
  font-size: 16px;
  border-bottom: 1px solid #eeeeee;
}
.item-content {
  flex: 1;
  padding: $gutter;
}
</style>

<script>
export default {
  name: 'energy-consumption-structure-analysis',
  data () {
    return {
      category: '',
      type: 1,
      date: '',
      loading1: false,
      loading2: false,
      info1: [],
      info2: [],
    }
  },
  computed: {
    isCollapsed () {
      return this.$store.state.isCollapsed
    },
    themeColor () {
      return this.$store.state.user.theme
    },
    pickerType () {
      const { type } = this
      return type === 1 ? 'month' : 'date'
    },
    pickerFormatter () {
      const { type } = this
      return type === 1 ? 'yyyy-MM' : 'yyyy-MM-dd'
    },
    chartOption1 () {
      return {
        legend: {
          left: 'left',
          top: 'top',
          orient: 'vertical'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 8
            },
            data: this.info1
          }
        ]
      }
    },
    chartOption2 () {
      return {
        legend: {
          left: 'left',
          top: 'top',
          orient: 'vertical'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: this.info2.map(v => v.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.info2.map(v => v.value),
            type: 'bar',
            itemStyle: {
              color: this.themeColor
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180,180,180,0.2)'
            }
          }
        ]
      }
    },
  },
  watch: {
    isCollapsed () {
      const charts = [this.$refs.chart1, this.$refs.chart2]
      charts.forEach(chart => {
        chart.resize()
      })
    }
  },
  mounted () {
    this.getInfo1()
    this.getInfo2()
  },
  methods: {
    getInfo1 () {
      this.loading1 = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading1 = false
          this.info1 = [
            { name: '高压配电房-二次能源-电力-购进已消费', value: '232080' },
            { name: '皮带秤-一次能源-其它原煤-购进已消费', value: '4350.72' },
            { name: '热力-二次能源-热力-购进已消费量（热力）', value: '27325.2' },
          ]
        }, 500)
      })
    },
    getInfo2 () {
      this.loading2 = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading2 = false
          this.info2 = [
            { name: '高压配电房', value: '232080' },
            { name: '皮带秤', value: '4350.72' },
            { name: '热力', value: '27325.2' },
          ]
        }, 500)
      })
    },
  },
}
</script>
